<template>
	<div class="container">
		<el-page-header @back="goBack" content="小程序看板"></el-page-header>

		<el-row type="flex" justify="space-between" class="e-m-t-45">
			<el-col :span="3" class="buttonList">
				<el-button type="primary" @click="create">新建</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="关键字">
						<el-input placeholder="请输入" v-model="key" prefix-icon="el-icon-search"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed type="index" width="50">
			</el-table-column>
			<el-table-column prop="username" label="用户名称">
			</el-table-column>
			<el-table-column prop="citypaths" label="可查看的地区站点">
				<template slot-scope="scope">
					<el-tag v-for="(item,index) in scope.row.citypaths" :key="index" class="e-m-r-10">{{ item }}</el-tag>
				</template>
            </el-table-column>
			<el-table-column prop="mobile" label="手机号" width="300">
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button @click="edit(scope.row)" type="text" size="small">修改地区</el-button>
					<el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<!-- 新建看板用户 -->
		<el-dialog :title="dialogType == 'add' ? '新建' : '编辑'" :visible.sync="dialogVisible" width="800px">
			<el-row type="flex" justify="space-between" class="">
                <el-col :span="3" class="buttonList"></el-col>
                <el-col class="text-right">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="输入手机号码">
                            <el-input placeholder="请输入" v-model="userKey" prefix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getUserList">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!-- 可选用户列表 -->
            <el-table :data="userList" stripe style="width: 100%">
                <el-table-column prop="name" label="用户昵称">
                    <template slot-scope="scope">
                        <div class="user-face">
                            <div class="avatar">
                                <el-avatar v-if="scope.row.photo" :src="fileURL + scope.row.photo" :size="40"></el-avatar>
                                <el-avatar v-else :size="40">{{ scope.row.name.charAt(0) }}</el-avatar>
                                <i class="iconfont icon-nan male" v-if="scope.row.sex == '先生'"></i>
                                <i class="iconfont icon-nv female" v-else></i>
                            </div>
                            <div class="name e-p-l-15">{{ scope.row.name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" width="180">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="100">
                    <template slot-scope="scope">
                    	<el-button type="text" size="small" @click="chooseUser(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<!-- <el-button type="primary" @click="submitType('form')">确定</el-button> -->
			</span>
		</el-dialog>
		<!-- 设置地区 -->
		<el-dialog title="设置地区" :visible.sync="dialogVisible2" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="所在地区" v-if="dialogVisible2">
					<el-cascader ref="area" separator="-" @change="SelectSearchCity" filterable :props="{
						multiple: true,
						lazy: true,
						checkStrictly: true,
						lazyLoad: loadCity,
						label: 'name',
						value: 'id'
					}" placeholder="选择地区" style="width: 100%;margin-right: 20px" clearable></el-cascader>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button v-if="dialogType == 'add'" type="primary" @click="assignment">确定</el-button>
				<el-button v-else type="primary" @click="confirmEdit">修改地区</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
		return {
			title: '小程序端看数据权限-' + this.websetting.name
		}
	},
	data() {
		return {
			loading: true,
			key: '',
			page: 1,
			pageSize: 10,
			total: 0,
			dialogVisible: false,//编辑新建
			dialogType: 'add',
			tableData: [],
			dataType: 1,
            userList: [], //可选用户列表
            userKey: '', //搜索可选用户关键词
			// 设置地区
			dialogVisible2: false,
			form:{
				mobile: null,
                name: null,
				cityPaths: ''
			},
			editId: 0
		}
	},
	watch: {
		dataType(val) {
			if (val == 0) {
				this.$router.push({
					path: '/admin/setting/uselist'
				})
			} else if (val == 1) {
				this.$router.push({
					path: '/admin/setting/boardUser'
				})
			} 
		},
	},
	mounted() {
		this.getList()
        // this.getUserList()
	},
	methods: {
		SelectSearchCity(arr) { //选择城市
			// this.form.cityPaths = ''

			// let temp = []
			// if(arr.length > 0){
			// 	arr.forEach((item)=>{
			// 		temp.push(item.join(','))
			// 	})
			// }
			// this.form.cityPaths = temp.join('|')
			this.form.cityPaths = []
			if(arr.length > 0){
				arr.forEach((item)=>{
					this.form.cityPaths.push(item[item.length - 1])
				})
			}
			console.log('cityPaths',this.form.cityPaths)
		},
		loadCity(node, resolve) { //加载城市
			this.$axios.post('/city/List', {
				pageIndex: 1,
				pageSize: 9999,
				pId: node.level == 0 ? '0' : node.value
			}).then((res) => {
				node = res.rows.map(function (c) {
				return {
					id: c.id,
					name: c.name,
					leaf: node.level >= 4
				}
				});
				resolve(node);
			})
		},
		chooseUser(form){
			this.form = form
			this.dialogVisible2 = true
		},
        assignment(){
            console.log(row)
			let row = this.form
            this.$confirm('确定要给此用户小程序看板权限吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.post(`/User/BoardUser/Create`,{
                    "mobile": row.mobile,
                    "name": row.name,
					"userId": row.id,
					"cityIds": row.cityPaths
                }).then(res => {
					console.log(res)
					this.getList()
					this.dialogVisible = false
					this.dialogVisible2 = false
					this.$message({
						type: 'success',
						message: '添加成功!'
					});
				})
			})
        },
        getUserList() {
            // 获取可选用户权限
			this.loading = true

			this.$axios.post('/User/List', {
				"PageIndex": 1,
				"PageSize": 30,
				"Key": this.userKey,
				"IsAll": true
			}).then((res) => {
				console.log(res)
                this.loading = false
				let datas = res.rows

				this.userList = datas;
			})
		},
		edit(row){
			this.dialogType = 'edit'
			this.editId = row.userid
			this.dialogVisible2 = true
		},
		confirmEdit(){
			this.$axios.post('/User/BoardUser/Edit',{
				userid: this.editId,
				cityids: this.form.cityPaths
			}).then((res)=>{
				this.$message({
					type: 'success',
					message: '地区修改成功!'
				});
				this.getList()
				this.dialogVisible2 = false
			})
		},
		del(row) {
			this.$confirm('此操作将删除该用户的查看看板权限, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.get(`/User/BoardUser/Delete?userId=${row.userid}`).then(res => {
					console.log(res)
					// this.form = res
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.getList()
				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		// submitType(formName) {
		// 	let api = ''
		// 	if (this.dialogType == 'add') {
		// 		api = '/Admin/Board/BoardUser/Create'
		// 	}
		// 	if (this.dialogType == 'edit') {
		// 		api = '/Admin/Board/BoardUser/Edit'
		// 	}
		// 	this.$refs[formName].validate((valid) => {
		// 		if (valid) {
		// 			this.$axios.post(api, this.form).then((res) => {
		// 				// this.$message.success(res.msg);
		// 				this.$message.success("提交成功");

		// 				this.dialogVisible = false;
		// 				this.getList()
		// 			})
		// 		} else {
		// 			console.log('error submit!!');
		// 			return false;
		// 		}
		// 	});

		// },
		create() {
			this.dialogType = "add"
			this.dialogVisible = true
		},
		goBack() {
			this.$router.go(-1)
		},
		getList() {
			this.tableData = []
			this.loading = true

			this.$axios.post('/User/BoardUser/List', {
				"PageIndex": this.page,
				"PageSize": this.pageSize,
				"Key": this.key
			}).then((res) => {
				console.log(res)
                this.loading = false
				let datas = res.rows
				
				datas.forEach((item)=>{
					item.citypaths = []
					item.citys.forEach((cell)=>{
						item.citypaths.push(cell.cityname)
					})
				})
				this.tableData = datas;
				this.total = res.total;
			})
		},
		pageChange(e) { // 页码切换事件
			this.page = e;
			this.getList()
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getList()
		}
	}
}
</script>

<style lang="scss" scoped>

.user-face {
	display: flex;
	align-items: center;
	position: relative;

	.male,
	.female {
		font-size: 14px;
		position: absolute;
		left: 30px;
		top: 0;
		background-color: #fff;
		height: 16px;
		width: 16px;
		line-height: 16px;
		border-radius: 6px;
	}

	.male {
		color: var(--blue);
	}

	.female {
		color: var(--pink);
	}
}
</style>
